<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-card class="card">
        <el-row>
          <el-col :span="16">
            <ChainMap />
          </el-col>
          <el-col :span="8">
            <RadarMap />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <EarchsMap
              style="height:280px;"
              :chart-data="echartData.order"
            />
          </el-col>
          <el-col :span="12">
            <EarchsMap
              :chart-data="echartData.user"
              style="height:260px;"
            />
          </el-col>
        </el-row>
        <el-row>
          <EarchsMap
            :chart-data="echartData.video"
            :is-axis-chart="false"
            style="height:260px;"
          />
        </el-row>

      </el-card>
    </div>
  </div>
</template>

<script>
// import MapCharts from './map/index.vue'
// import HomeMap from './map/Home.vue'
// import AboutMap from './map/About.vue'
import RadarMap from './map/radar/radar.vue'
import ChainMap from './map/China_Map.vue'
import EarchsMap from './echars/index.vue'
export default {
  name: 'Dashboard',
  // components: { MapCharts },
  components: {
    // HomeMap,
    // AboutMap,
    ChainMap,
    RadarMap,
    EarchsMap
  },
  data() {
    return {
      tableData: [],
      echartData: {
        order: {
          xData: [],
          series: []
        },
        user: {
          xData: [],
          series: []
        },
        video: {
          series: []
        }
      }
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    // 获取table表数据
    getTableData() {
      this.$http
        .get('/home/getData')
        .then((res) => {
          console.log(res)
          res = res.data
          this.tableData = res.data.tableData
          // 获取echartsdata--order--订单折线图
          const order = res.data.orderData
          this.echartData.order.xData = order.date
          // 取出series中name部分---键名
          const keyArray = Object.keys(order.data[0])
          keyArray.forEach((key) => {
            this.echartData.order.series.push({
              name: key === 'wechat' ? '小程序' : key,
              data: order.data.map((item) => item[key]),
              type: 'line'
            })
          })
          // 用户柱状图
          this.echartData.user.xData = res.data.userData.map(
            (item) => item.date
          )
          this.echartData.user.series.push({
            name: '新增用户',
            data: res.data.userData.map((item) => item.new),
            type: 'bar'
          })
          this.echartData.user.series.push({
            name: '活跃用户',
            data: res.data.userData.map((item) => item.active),
            type: 'bar',
            barGap: 0
          })
          // 视频饼图
          this.echartData.video.series.push({
            data: res.data.videoData,
            type: 'pie'
          })
        })
        .catch((err) => {
          console.log(err)
        })
    }
    // 获取echarts图表数据
  }

}
</script>

<style lang="scss" scoped>
.card{
  margin: 20px;
    .el-row {
    margin-bottom: 20px;
    margin-top: 50px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .map{
    width: 600px;
  }
}
</style>
